New RelicでEC2上のWebページをブラウザモニタリングをしてみた

sora

2023.04.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、ゲームソリューショングループのsoraです。
今回は、New RelicでEC2上のWebページをブラウザモニタリングをしてみたことについて書いていきます。
初心者向けの記事です。

はじめに

New Relicとは何かについては、以下ブログをご参照ください。

New Relicを導入した際に、見れるメトリクスはどのようなものかを実際に試して確認してみようと思います。
New Relicでは、色々な種類のモニタリングがありますが、今回はブラウザモニタリングを導入していきます。
（公式ページ）Browserモニタリングエージェントのインストール

New Relic ブラウザモニタリングの導入

監視対象

今回監視対象とするのはEC2上のWebページです。
以下のブログで作成したものを使用します。

ブラウザモニタリングの導入

Add DataからBrowser Monitoringを選択します。
今回はHTMLファイルにスクリプトをコピーアンドペイストで導入します。
表示されたスクリプトをHTMLファイルのhead部分（meta以降）に貼り付けます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- ↓New Relicで表示されたスクリプトを貼り付け -->
    <script type="text/javascript">
    </script>
    <!-- ↑New Relicで表示されたスクリプトを貼り付け -->
</head>
<body>
    <h1>sora</h1>
    <h2>所属</h2>
    <p>営業統括本部 ゲームソリューショングループ ソリューションアーキテクト</p>
    <h2>今後ブログにしようと思っていること</h2>
    <ul>
        <li>案件対応時に出たエラー</li>
        <li>Goで色々作ってみた成果物</li>
        <li>構築したことのない構成やサービスをTerraformで構築</li>
    </ul>
</body>
</html>

メトリクスの確認

モニタリングの準備ができたため、Webページを表示した後にNew Relicにてメトリクスを確認していきます。
Summary

Error rate：JavaScriptエラーになったページビューの割合
Largest Contentful Paint (LCP)：ページの読み込みが開始されてから最大のテキストブロックまたは画像要素が画面に表示されるまでの時間
First Input Delay (FID)：ユーザーが最初にサイトを操作したときから、ブラウザが操作に応答できるようになるまでの時間
Cumulative Layout Shift (CLS)：ページの読み込みが開始されてからライフサイクルの状態が非表示に変わるまでの間に発生したすべての予期しないレイアウトシフトの累積スコア
User time on the site：サイト滞在時間

などを見ることができます。

Page view Session traces Web vitals Browsers